(function () {
    $.fn.jmodal = function (options) {

        var defaults = {
            ajaxLink:'',
            postData:'',
            showMask:true,
            showId:"jmodal",
            title:"Modal Box",
            titleColor:'#fff',
            titleBg:'#EFB632',
            width:330,
            height:200
        };

        var options = $.extend(defaults, options);

        var mask = $('<div id="mask"></div>');

        //Hide mask and popup
        function modalHide() {
            $(document).unbind("keydown", handleEscape);

            if (options.showMask) {
                var remove = function () {
                    $(this).remove();
                }
                $('#mask').fadeOut(remove);
            }

            $('.window').hide();
        }

        //Our function that listens for escape key.
        function handleEscape(e) {
            if (e.keyCode == 27) {
                modalHide();
            }
        }

        $(window).resize(function () {

            var box = $('#'+options.showId);

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Set height and width to mask to fill up the whole screen
            $('#mask').css({'width':maskWidth, 'height':maskHeight});

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            box.css('top', winH / 2 - box.height() / 2);
            box.css('left', winW / 2 - box.width() / 2);

        });

        return $(this).click(function (e) {

            if (options.showMask) {
                $('body').append(mask.click(function () {
                    modalHide();
                }));
            }
            var id = $("#" + options.showId);

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            $(id).addClass('window');
            $(id).css('width', options.width + 'px');
            $(id).css('height', options.height + 'px');
            $(id).css('top', winH / 2 - $(id).height() / 2);
            $(id).css('left', winW / 2 - $(id).width() / 2);
            $(id).css("opacity", 0.8);

            var mdTitle = $('<div class="modalTitle">' + options.title + '</div>');
            $(mdTitle).css('background', options.titleBg);
            $(mdTitle).css('color', options.titleColor);

            var closebt = $('<a title="Close">x</a>');
            $(closebt).css('color', options.titleColor);
            $(closebt).css('line-height', '30px');
            $(closebt).css('font-size', '12px');
            $(closebt).css('float', 'right');
            $(closebt).css('padding', '0px 5px');
            $(closebt).css('cursor', 'pointer');
            $(closebt).hover(function () {
                $(this).css('color', '000');
            }, function () {
                $(this).css('color', options.titleColor);
            });

            $(closebt).click(function () {
                modalHide();
                return false;
            });
            $(mdTitle).append($(closebt));

            var mdContent = $("<div class='modalContent'></div>").css('height', $(id).height()-40);

            var href = $(this).attr('href');
            if (options.ajaxLink) {
                $.ajax({
                    url:options.ajaxLink,
                    data:options.postData,
                    success:function (data) {
                        $(mdContent).append(data);
                    }
                });
            }else if(href){
                $.ajax({
                    url:href,
                    data:options.postData,
                    success:function (data) {
                        $(mdContent).append(data);
                    }
                });
            }
            $(mdContent).css('padding','5px');
            $(id).html(mdTitle);
            $(id).append(mdContent);
            $('#mask').css({'width':maskWidth, 'height':maskHeight});

            //transition effect
            $('#mask').fadeIn(1000);
            $('#mask').fadeTo("slow", 0.8);
            //transition effect
            $(id).fadeIn(2000);

            //Prevent the anchor link from loading
            e.preventDefault();
            //Activate a listener
            $(document).keydown(handleEscape);

            return false;
        });
    };
})(jQuery);
